<template>
  <view>
    <h2>美食</h2>
    <view class="heard" bindtap="tiaozhuan">
      <view class="item" v-for="item in foodName" :key="item.id" @click="gototail(item)"> 
        <view class="img">
          <image :src= "item.img" alt=""></image>
        </view>
        <view class="connet">
          <view class="connet3">
            <h3>{{item.name}}</h3>
          </view>
           <view class="connet1">
            <view class="ab"><image class="iconfont" src="../../static/五角星.png"></image>{{item.score}}</view>
            <view class="ac">月售:{{item.sale}}</view>
          </view>
           <view class="connet2">
            <view class="connet2_1">{{item.minutes}}min</view>
            <view>{{item.m}}km</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '../../utils/api.js'
export default {
  data() {
        return {
            foodName:[{
              id:'',
              name:'',
              score:'',
              img:'',
              sale:'',
              minutes:'',
              m:''
            }]
        }
    },
  methods: {
    myAlldata(){
      let _this = this
       uni.request({
        url: api.GET_SELECT_FOODS,
        method:'GET',
        success(data){
          console.log(data)
          _this.foodName =data.data.data;
        }
      })
    },
    gototail(item) {
      console.log(item.id);
      uni.navigateTo({
        url: "../store/store?store_id=" + item.id,
      });
    }
  },
  created() {
    this.myAlldata()
  },
}
</script>

<style>
view{
  background-color:#F5F6F8
}
h2{
  margin-left: 30rpx;
  margin-top: 10rpx;
  font-weight: 900;
  font-size: 60rpx;
}
.heard{
  width: 690rpx;
  height: 240rpx;
  border-radius: 20rpx;
  margin-left: 30rpx;
  margin-top: 50rpx;
  background-color:#FFFFFF;
}
.item{
  background-color: #FFFFFF;
  display: flex;
  flex-direction: space-between;
  margin-bottom: 10rpx;
}
.img{
  width: 200rpx;
  height: 200rpx;
  margin-left: 15rpx;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
}
image{
  width: 200rpx;
  height: 200rpx
}
.iconfont{
  width: 40rpx;
  height: 40rpx;
}
.connet{
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.connet3{
  width: 100%;
}
.connet3 h3{
  margin-top: 10rpx;
  width: 100%;
  margin-left: 15rpx;
  font-size: 40rpx;
}
.connet1{
  display: flex;
  width: 100%;
  flex-direction: space-between;
}
.connet1 .ab{
  margin-left: 15rpx;
}
.connet1 .ac{ 
  margin-left: 25rpx;
}
.connet2{
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 3%;
}
.connet2_1{
  margin-left: 15rpx;
  color: #FFFFFF;
  width: 150rpx;
  height: 40rpx;
  background: #22252B;
  border-radius: 10rpx;

} 

</style>